
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手机app通用模板在线学习课程个人中心页面模板</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/tab.js"></script>
</head>
<body>

<section class="jq22-flexView">
	<header class="jq22-navBar jq22-navBar-fixed">
		<a href="javascript:;" class="jq22-navBar-item">
			<i class="icon"></i>
		</a>
		<div class="jq22-center">
			<span class="jq22-center-title">学习</span>
		</div>
		<a href="javascript:;" class="jq22-navBar-item" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
			<i class="icon icon-sys"></i>
		</a>
	</header>
	<section class="jq22-scrollView">
		<div class="jq22-flex">
			<div class="jq22-user-img">
				<img src="images/user.png" alt="">
			</div>
			<div class="jq22-flex-box">
				<h2>大鹏展翅</h2>
			</div>
			<div class="jq22-right-text">
				<div class="jq22-right-icon">12<i class="icon icon-st"></i></div>
				<button>商城</button>
			</div>
		</div>
		<div class="jq22-image-text">
			<a href="javascript:;" class="jq22-flex ">
				<div class="jq22-shrink-img">
					<img src="images/s1.png" alt="">
				</div>
				<div class="jq22-flex-box">
					<h2>课程任务</h2>
				</div>
			</a>
			<a href="javascript:;" class="jq22-flex ">
				<div class="jq22-shrink-img">
					<img src="images/s2.png" alt="">
				</div>
				<div class="jq22-flex-box">
					<h2>练习任务</h2>
				</div>
			</a>

		</div>
		<div class="jq22-study-title">
			<h2>我的课程</h2>
		</div>

		<div class="jq22-tab" data-ydui-tab style="padding-bottom:4rem">
			<ul class="tab-nav">
				<li class="tab-nav-item tab-active">
					<a href="javascript:;">
						<span>未结课</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>已结课</span>
					</a>
				</li>
			</ul>
			<div class="tab-panel">
				<div class="tab-panel-item tab-active">
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">进度：<em>7</em>/8</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info" style="width:75%"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user2.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">进度：<em>2</em>/8</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info" style="width:25%"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user3.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">进度：<em>3</em>/8</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info" style="width:35%"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user4.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">进度：<em>5</em>/8</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info" style="width:65%"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user5.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">进度：<em>2</em>/8</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info" style="width:25%"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">进度：<em>4</em>/8</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info" style="width:55%"></div>
							</div>
						</div>
					</a>
				</div>
				<div class="tab-panel-item">
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">已结课</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">已结课</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">已结课</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">已结课</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">已结课</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info"></div>
							</div>
						</div>
					</a>
					<a href="javascript:;" class="jq22-flex b-line">
						<div class="jq22-flex-box">
							<h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
							<p>4月19号-9月18号 每周二13:00-16:00</p>
							<div class="jq22-flex" style="padding:0">
								<div class="jq22-sml-user">
									<img src="images/user1.png" alt="">
								</div>
								<div class="jq22-flex-box">
									<h3>初级菜鸟</h3>
								</div>
							</div>
						</div>
						<div class="jq22-right-seep">
							<div class="jq22-seep-text">已结课</div>
							<div class="jq22-seep-res">
								<div class="jq22-seep-info"></div>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>



	</section>
	<footer class="jq22-footer jq22-footer-fixed">
		<a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-loan"></i>
                    </span>
			<span class="jq22-tabBar-item-text">首页</span>
		</a>
		<a href="javascript:;" class="jq22-tabBar-item jq22-tabBar-item-active">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-credit"></i>
                    </span>
			<span class="jq22-tabBar-item-text">学习</span>
		</a>
		<a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-ions"></i>
                    </span>
			<span class="jq22-tabBar-item-text">消息</span>
		</a>
		<a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-car"></i>
                    </span>
			<span class="jq22-tabBar-item-text">我的</span>
		</a>
	</footer>
</section>
</body>

</html>
